<template>
  <div style="width: 100%; height: 80%; position: relative; ">
    <vue3VideoPlay v-bind="options" poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg'/>

    <vue-danmaku
        ref="danmaku"
        class="danmaku"
        v-model:danmus="danmus"
        :useSlot="true"
        :loop="false"
        :speeds="80"
        :channels="4"
        style="
        position: absolute;
        width: 500px;
        height: 50%;
        top: 0;
        z-index: 40000;
      "
    >
      <template v-slot:dm="{ danmu }">
        <span>{{ danmu }}</span>
      </template>
    </vue-danmaku>
  </div>
  <br>
</template>

<script setup lang="ts">

import {reactive, ref} from 'vue';

import vueDanmaku from "vue3-danmaku";


/*const textvalue=ref('');*/
const danmus = ref([1111111,2222222,3333333]);

const options = reactive({
  width: '500px', //播放器高度
  height: '260px', //播放器高度
  color: "#409eff", //主题色
  currentTime:60,
  speed:false, //关闭进度条拖动
  title: '', //视频名称
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
})
</script>

<style lang="scss" scoped>
</style>



